<template>
  <section class="box">
    <todolist-insert @update:model-value="handleInsert"></todolist-insert>
    <todolist-list
      :list-data="listData"
      @delete-row="handleDeleteRow"
      @delete="handleDelete"
    ></todolist-list>
  </section>
</template>

<script setup lang="ts">
import todolistInsert from "./todolist-insert.vue";
import todolistList from "./todolist-list.vue";

import { reactive } from "vue";
const listData = reactive([
  {
    id: 0,
    name: "Hydra",
    sex: "男",
    tel: "13547811112",
    major: "JAVA",
  },
  {
    id: 1,
    name: "王珂",
    sex: "男",
    tel: "13547811113",
    major: "WEB",
  },
  {
    id: 2,
    name: "聂仔欣",
    sex: "男",
    tel: "13547811114",
    major: "JAVA",
  },
]);

function handleInsert(value: any) {
  listData.push(value);
}

function handleDeleteRow(id: number) {
  let index = listData.findIndex((v: any) => v.id == id);
  listData.splice(index, 1);
}

function handleDelete(selectIds:any[]) {
  // 从listData中删除在selectIds中的所有数据
  // 把未选中的数据拿出来，然后复制给listData
    const result = listData.filter(
      (v1) => selectIds.findIndex((v2) => v2 == v1.id) == -1
    );
    // 数组清空：把长度赋值为0
    listData.length = 0;
    // 添加元素
    listData.push(...result);
}
</script>

<style scoped lang="scss">
</style>